<script setup>
// 初始化 棋盘和角色
import {reactive} from "vue";

const boardSize = 3;
// 当前是否有人获胜的标志
let isSuccess = false
// 在倾斜的获胜方始中必定过 中心点 用于判断当前是否过中心点
let centerBlock = false
// 生成 3 * 3 的棋盘格
let beforeBoard = new Array(boardSize).fill(
    {"background": '#ffffff', role: ''}).map(
    () => new Array(boardSize).fill({"background": '#ffffff', role: ''})
);
// 根据角色点击选择的位置进行颜色的 渲染
let board = JSON.parse(JSON.stringify(beforeBoard))
let currentPlayer = 'x'; // 当前玩家默认为x TODO 可以设置成自行选择的那种
// 记录不同角色分别所选的位置 X -> X ICON | Y -> Y ICON
const playerMoves = reactive({
  x: [],
  o: []
});
// 当前已选数据x y 分割判断数组 用于当选择的坐标到达3个的时候进行规则校验
const nowChooseX = []
const nowChooseY = []
// 当前待选择的 player 的颜色
const waitChoseColor =''
const getNowBlockCoordinate = (x, y) => {
  if (isSuccess) return;
  // 再点击block 之前判断这个方块是否已经被渲染 用来判断当前是否可以被点击
  if (board[x][y].background !== '#ffffff') return
  // 判断当前的角色名称
  if (currentPlayer === 'x') {
    // 判断当前的数组的长度 当等于3的时候将第一个重置颜色 并去掉
    if (playerMoves.x.length === 3) {
      board[playerMoves.x[0].x][playerMoves.x[0].y].background = '#ffffff'
      board[playerMoves.x[0].x][playerMoves.x[0].y].role = ''
      playerMoves.x.shift()
    }
    playerMoves.x.push({x, y})
    // 设置新点击的块的颜色
    board[x][y].background = 'rgba(0, 220, 130)'
    board[x][y].role = 'x'
    // 更新 旧的块的颜色
    // 当有两条数据的时候将第一条数据颜色 下沉
    if (playerMoves.x.length === 2) {
      let theFirstValuex = playerMoves.x[0].x
      let theFirstValuey = playerMoves.x[0].y
      board[theFirstValuex][theFirstValuey].background = 'rgba(0, 220, 130,0.8)'
    }
    // 当有两条数据的时候将第一条数据和第二条数据 颜色 下沉
    if (playerMoves.x.length === 3) {
      let theFirstValuex = playerMoves.x[0].x
      let theFirstValuey = playerMoves.x[0].y
      board[theFirstValuex][theFirstValuey].background = 'rgba(0, 220, 130,0.4)'

      let theSecondValuex = playerMoves.x[1].x
      let theSecondValuey = playerMoves.x[1].y
      board[theSecondValuex][theSecondValuey].background = 'rgba(0, 220, 130,0.8)'
      // 只有当 当钱的数量为 3的时候才能判断当前是否连成线
      for (let i = 0; i < playerMoves.x.length; i++) {
        nowChooseX.push(playerMoves.x[i].x)
        nowChooseY.push(playerMoves.x[i].y)
        if (playerMoves.x[i].x === 1 && playerMoves.x[i].y === 1) {
          centerBlock = true
        }
      }
      decideSuccess(currentPlayer, nowChooseX, nowChooseY, centerBlock)
    }
  }

  if (currentPlayer === 'o') {
    // 判断当前的数组的长度 当等于3的时候将第一个重置颜色 并去掉
    if (playerMoves.o.length === 3) {
      board[playerMoves.o[0].x][playerMoves.o[0].y].background = '#ffffff'
      board[playerMoves.o[0].x][playerMoves.o[0].y].role = ''
      playerMoves.o.shift()
    }
    // 将当前选中的格子的x,y 坐标分别记录
    playerMoves.o.push({x, y})
    // 设置新点击的块的颜色
    board[x][y].background = '#fc5531'
    board[x][y].role = 'y'
    // 更新 旧的块的颜色
    // 当有两条数据的时候将第一条数据颜色 下沉
    if (playerMoves.o.length === 2) {
      let theFirstValuex = playerMoves.o[0].x
      let theFirstValuey = playerMoves.o[0].y
      board[theFirstValuex][theFirstValuey].background = 'rgba(252,85,49,0.8)'
    }
    // 当有两条数据的时候将第一条数据和第二条数据 颜色 下沉
    if (playerMoves.o.length === 3) {
      centerBlock = false
      let theFirstValuex = playerMoves.o[0].x
      let theFirstValuey = playerMoves.o[0].y
      board[theFirstValuex][theFirstValuey].background = 'rgba(252,85,49,0.4)'
      let theSecondValuex = playerMoves.o[1].x
      let theSecondValuey = playerMoves.o[1].y
      board[theSecondValuex][theSecondValuey].background = 'rgba(252,85,49,0.8)'
      // 只有当 当钱的数量为 3的时候才能判断当前是否连成线
      for (let i = 0; i < playerMoves.o.length; i++) {
        nowChooseX.push(playerMoves.o[i].x)
        nowChooseY.push(playerMoves.o[i].y)
        if (playerMoves.o[i].x === 1 && playerMoves.o[i].y === 1) {
          centerBlock = true
        }
      }
      decideSuccess(currentPlayer, nowChooseX, nowChooseY, centerBlock)
    }
  }
  // 最开始的时候是 X 结束操作的时候 进行角色的互换
  currentPlayer === 'x' ? currentPlayer = 'o' : currentPlayer = 'x'

  // todo 自己一个人玩多没意思 + 定时器 + 玩家2随机下在没有被 占领的位置
}

// 判断当前传入的数据 是否连成一条线
const decideSuccess = (role, xList, yList, has11) => {
  let xLength = Array.from(new Set(xList)).length
  let yLength = Array.from(new Set(yList)).length
  // 在同一行/在同一列/斜着的 必定包含 1，1 中间块
  if ((xLength === 3 && yLength === 1) || (xLength === 1 && yLength === 3) || (has11 && xLength === 3 && yLength === 3)) {
    isSuccess = true
  }
  // 重置规则校验数组
  nowChooseX.splice(0, nowChooseX.length)
  nowChooseY.splice(0, nowChooseY.length)
}

// 遍历当前所有数据并获取未被渲染的位置的 x,y 坐标
const getAllBlankBlock = () => {
  let canBeUsedList = []
  for (let i = 0; i < board.length; i++) {

  }
}
// 重置数据
const resetData = () => {
  beforeBoard = new Array(boardSize).fill({
    "background": '#ffffff',
    role: ''
  }).map(() => new Array(boardSize).fill({"background": '#ffffff', role: ''}));

  board = JSON.parse(JSON.stringify(beforeboard))
  isSuccess = false
  centerBlock = false
  playerMoves.x = []
  playerMoves.o = []
}

</script>

<template>
  <div class="all">
    <div class="ticTacToe">
      <div class="masking">
        <div class="line" v-for="(line,lineNo) in board">
          <div class="column" v-for="(column,columnNo) in line">
            <div class="block" @click="getNowBlockCoordinate(lineNo,columnNo)"
                 :style="{'background':column.background}">
              <!-- 根据当前user 选择的角色 获取当前应当展示的 图标 / 颜色-->
              <div class="svgIcon" v-if="column.role === 'y'">
                <svg t="1713852257890" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="1580" width="100" height="100">
                  <path
                      d="M512 192a320 320 0 1 0 0 640 320 320 0 1 0 0-640z m448 320a448 448 0 1 1-896 0 448 448 0 1 1 896 0z"
                      p-id="1581" fill="#fff"></path>
                </svg>
              </div>
              <div class="svgIcon" v-if="column.role === 'x'">
                <svg t="1713852705320" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="5740" width="100" height="100">
                  <path
                      d="M960 780.736 691.008 512 960 243.264 780.736 64 512 332.864 243.136 64 64 243.264 332.736 512 64 780.736 243.136 960 512 691.136 780.736 960z"
                      fill="#fff" p-id="5741"></path>
                </svg>

                <!--<svg t="1713865746035" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
                <!--     xmlns="http://www.w3.org/2000/svg" p-id="27573" width="90" height="90">-->
                <!--  <path-->
                <!--      d="M656.7936 512l289.6896 289.5872a102.4 102.4 0 0 1-144.7936 144.896L512 656.7936 222.4128 946.4832A102.4 102.4 0 1 1 77.5168 801.5872L367.2064 512 77.5168 222.4128A102.4 102.4 0 1 1 222.4128 77.5168L512 367.2064 801.5872 77.5168a102.4 102.4 0 1 1 144.896 144.896z"-->
                <!--      fill="#fff" p-id="27574"></path>-->
                <!--</svg>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="reset" @click="resetData">重置</div>
    <div>展示当前选择的 数据（测试）</div>
    <div class="showTable">
      <div class="x"><span>X Value</span> {{ playerMoves.x }}</div>
      <div class="o"><span>O Value</span> {{ playerMoves.o }}</div>
    </div>
  </div>
</template>

<style scoped lang="less">
.ticTacToe {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .masking {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(204, 204, 204, 0.6);
  }

  .line {
    display: flex;

    .column {
      display: flex;
      justify-content: space-around;

      .block {
        user-select: none;
        width: 100px;
        height: 100px;
        border: 1px solid #e0e0e0;
        cursor: pointer;
        box-sizing: border-box;
        transition: all 0.6s;
        //display: flex;
        //justify-content: center;
        //align-items: center;
        .svgIcon {
          display: block;
          transition: all 0.6s;
        }
      }
    }
  }
}

.reset {
  width: 150px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  color: seagreen;
  margin: 15px auto;
  border: 1px solid seagreen;
  text-align: center;
  background: #cbfdbd;
  user-select: none;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;

  &:hover {
    background: #57c03a;
    color: #ffffff;
  }
}

.showTable {
  width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background: #cbfdbd;

  .x {
    width: 49%;
    border: 1px solid seagreen;
    background: #cbfdbd;
  }

  .o {
    width: 49%;
    border: 1px solid seagreen;
    background: #cbfdbd;
  }
}
</style>
